<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 资产报表</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="asset.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">资产报表</div>
      <div class="nav-right">
        <i class="fas fa-share-alt" id="shareBtn"></i>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="app-content">
      <!-- 报表类型选择 -->
      <div class="p-4 pb-2">
        <div class="flex overflow-x-auto hide-scrollbar">
          <button class="report-tab active" data-tab="overview">资产概览</button>
          <button class="report-tab" data-tab="category">分类统计</button>
          <button class="report-tab" data-tab="department">部门分布</button>
          <button class="report-tab" data-tab="lifecycle">生命周期</button>
          <button class="report-tab" data-tab="financial">财务分析</button>
        </div>
      </div>
      
      <!-- 报表内容 -->
      <div class="report-content" id="overview">
        <!-- 资产总览卡片 -->
        <div class="stats-card-container">
          <div class="stats-card bg-blue-50">
            <div class="stats-icon bg-blue-100 text-blue-500">
              <i class="fas fa-laptop"></i>
            </div>
            <div class="stats-info">
              <div class="stats-value">1,245</div>
              <div class="stats-label">资产总数</div>
            </div>
          </div>
          
          <div class="stats-card bg-green-50">
            <div class="stats-icon bg-green-100 text-green-500">
              <i class="fas fa-check-circle"></i>
            </div>
            <div class="stats-info">
              <div class="stats-value">1,156</div>
              <div class="stats-label">在用资产</div>
            </div>
          </div>
          
          <div class="stats-card bg-yellow-50">
            <div class="stats-icon bg-yellow-100 text-yellow-500">
              <i class="fas fa-tools"></i>
            </div>
            <div class="stats-info">
              <div class="stats-value">32</div>
              <div class="stats-label">维修中</div>
            </div>
          </div>
          
          <div class="stats-card bg-red-50">
            <div class="stats-icon bg-red-100 text-red-500">
              <i class="fas fa-trash-alt"></i>
            </div>
            <div class="stats-info">
              <div class="stats-value">57</div>
              <div class="stats-label">已处置</div>
            </div>
          </div>
        </div>
        
        <!-- 资产价值统计 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">资产价值统计</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="valueChart"></canvas>
          </div>
        </div>
        
        <!-- 资产状态分布 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">资产状态分布</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="statusChart"></canvas>
          </div>
        </div>
        
        <!-- 最近资产变动 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">最近资产变动</h3>
            <div class="section-actions">
              <a href="asset_history.html" class="text-blue-500 text-sm">查看更多</a>
            </div>
          </div>
          <div class="recent-changes">
            <div class="change-item">
              <div class="change-icon bg-green-100 text-green-500">
                <i class="fas fa-plus"></i>
              </div>
              <div class="change-info">
                <div class="change-title">新增资产：戴尔 OptiPlex 7090</div>
                <div class="change-meta">2023-07-15 | 信息科技部</div>
              </div>
            </div>
            
            <div class="change-item">
              <div class="change-icon bg-yellow-100 text-yellow-500">
                <i class="fas fa-exchange-alt"></i>
              </div>
              <div class="change-info">
                <div class="change-title">资产调拨：联想ThinkPad X1</div>
                <div class="change-meta">2023-07-10 | 从市场部调至财务部</div>
              </div>
            </div>
            
            <div class="change-item">
              <div class="change-icon bg-red-100 text-red-500">
                <i class="fas fa-trash-alt"></i>
              </div>
              <div class="change-info">
                <div class="change-title">资产处置：HP LaserJet 1020</div>
                <div class="change-meta">2023-07-05 | 已达使用年限</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分类统计报表 -->
      <div class="report-content hidden" id="category">
        <!-- 资产类型分布 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">资产类型分布</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="categoryChart"></canvas>
          </div>
        </div>
        
        <!-- 资产品牌分布 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">资产品牌分布</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="brandChart"></canvas>
          </div>
        </div>
        
        <!-- 资产类型明细 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">资产类型明细</h3>
            <div class="section-actions">
              <button class="btn-text">导出</button>
            </div>
          </div>
          <div class="overflow-x-auto">
            <table class="report-table">
              <thead>
                <tr>
                  <th>资产类型</th>
                  <th>数量</th>
                  <th>原值合计</th>
                  <th>净值合计</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>笔记本电脑</td>
                  <td>356</td>
                  <td>¥3,560,000</td>
                  <td>¥2,136,000</td>
                </tr>
                <tr>
                  <td>台式电脑</td>
                  <td>289</td>
                  <td>¥1,734,000</td>
                  <td>¥867,000</td>
                </tr>
                <tr>
                  <td>服务器</td>
                  <td>42</td>
                  <td>¥2,100,000</td>
                  <td>¥1,470,000</td>
                </tr>
                <tr>
                  <td>打印机</td>
                  <td>78</td>
                  <td>¥624,000</td>
                  <td>¥312,000</td>
                </tr>
                <tr>
                  <td>网络设备</td>
                  <td>125</td>
                  <td>¥875,000</td>
                  <td>¥525,000</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <!-- 部门分布报表 -->
      <div class="report-content hidden" id="department">
        <!-- 部门资产数量 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">部门资产数量</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="deptCountChart"></canvas>
          </div>
        </div>
        
        <!-- 部门资产价值 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">部门资产价值</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="deptValueChart"></canvas>
          </div>
        </div>
        
        <!-- 部门资产明细 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">部门资产明细</h3>
            <div class="section-actions">
              <button class="btn-text">导出</button>
            </div>
          </div>
          <div class="overflow-x-auto">
            <table class="report-table">
              <thead>
                <tr>
                  <th>部门</th>
                  <th>资产数量</th>
                  <th>原值合计</th>
                  <th>净值合计</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>信息科技部</td>
                  <td>245</td>
                  <td>¥2,450,000</td>
                  <td>¥1,715,000</td>
                </tr>
                <tr>
                  <td>财务部</td>
                  <td>156</td>
                  <td>¥1,248,000</td>
                  <td>¥748,800</td>
                </tr>
                <tr>
                  <td>市场部</td>
                  <td>189</td>
                  <td>¥1,512,000</td>
                  <td>¥907,200</td>
                </tr>
                <tr>
                  <td>人力资源部</td>
                  <td>124</td>
                  <td>¥992,000</td>
                  <td>¥595,200</td>
                </tr>
                <tr>
                  <td>研发部</td>
                  <td>278</td>
                  <td>¥2,780,000</td>
                  <td>¥1,946,000</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <!-- 生命周期报表 -->
      <div class="report-content hidden" id="lifecycle">
        <!-- 资产年龄分布 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">资产年龄分布</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="ageChart"></canvas>
          </div>
        </div>
        
        <!-- 折旧趋势 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">折旧趋势</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="depreciationChart"></canvas>
          </div>
        </div>
        
        <!-- 即将到期资产 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">即将到期资产</h3>
            <div class="section-actions">
              <button class="btn-text">导出</button>
            </div>
          </div>
          <div class="expiring-assets">
            <div class="asset-item">
              <div class="asset-info">
                <div class="asset-name">联想ThinkPad T480</div>
                <div class="asset-meta">编号: A2020056 | 剩余使用期: 2个月</div>
              </div>
              <div class="asset-action">
                <button class="btn-outline-sm">处置申请</button>
              </div>
            </div>
            
            <div class="asset-item">
              <div class="asset-info">
                <div class="asset-name">戴尔 OptiPlex 7060</div>
                <div class="asset-meta">编号: A2020078 | 剩余使用期: 3个月</div>
              </div>
              <div class="asset-action">
                <button class="btn-outline-sm">处置申请</button>
              </div>
            </div>
            
            <div class="asset-item">
              <div class="asset-info">
                <div class="asset-name">惠普 LaserJet Pro M402n</div>
                <div class="asset-meta">编号: A2020112 | 剩余使用期: 4个月</div>
              </div>
              <div class="asset-action">
                <button class="btn-outline-sm">处置申请</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 财务分析报表 -->
      <div class="report-content hidden" id="financial">
        <!-- 资产价值趋势 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">资产价值趋势</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="valueTrendChart"></canvas>
          </div>
        </div>
        
        <!-- 资产投入分析 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">资产投入分析</h3>
            <div class="section-actions">
              <button class="btn-icon"><i class="fas fa-ellipsis-v"></i></button>
            </div>
          </div>
          <div class="chart-container">
            <canvas id="investmentChart"></canvas>
          </div>
        </div>
        
        <!-- 资产ROI分析 -->
        <div class="report-section">
          <div class="section-header">
            <h3 class="section-title">资产ROI分析</h3>
            <div class="section-actions">
              <button class="btn-text">导出</button>
            </div>
          </div>
          <div class="overflow-x-auto">
            <table class="report-table">
              <thead>
                <tr>
                  <th>资产类型</th>
                  <th>投入成本</th>
                  <th>维护成本</th>
                  <th>产出价值</th>
                  <th>ROI</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>笔记本电脑</td>
                  <td>¥3,560,000</td>
                  <td>¥178,000</td>
                  <td>¥4,450,000</td>
                  <td>+19.5%</td>
                </tr>
                <tr>
                  <td>台式电脑</td>
                  <td>¥1,734,000</td>
                  <td>¥86,700</td>
                  <td>¥2,080,800</td>
                  <td>+14.3%</td>
                </tr>
                <tr>
                  <td>服务器</td>
                  <td>¥2,100,000</td>
                  <td>¥315,000</td>
                  <td>¥3,150,000</td>
                  <td>+30.4%</td>
                </tr>
                <tr>
                  <td>打印机</td>
                  <td>¥624,000</td>
                  <td>¥93,600</td>
                  <td>¥686,400</td>
                  <td>-4.8%</td>
                </tr>
                <tr>
                  <td>网络设备</td>
                  <td>¥875,000</td>
                  <td>¥87,500</td>
                  <td>¥1,050,000</td>
                  <td>+10.0%</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="tab-bar">
      <a href="home.html" class="tab-item">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item active">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <!-- 分享模态框 -->
  <div class="modal" id="shareModal">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">分享报表</div>
        <button class="modal-close"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">分享方式</label>
          <div class="grid grid-cols-4 gap-2">
            <div class="share-option">
              <div class="share-icon bg-green-100 text-green-500">
                <i class="fab fa-weixin"></i>
              </div>
              <div class="share-name">微信</div>
            </div>
            <div class="share-option">
              <div class="share-icon bg-blue-100 text-blue-500">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="share-name">邮件</div>
            </div>
            <div class="share-option">
              <div class="share-icon bg-purple-100 text-purple-500">
                <i class="fas fa-file-pdf"></i>
              </div>
              <div class="share-name">PDF</div>
            </div>
            <div class="share-option">
              <div class="share-icon bg-yellow-100 text-yellow-500">
                <i class="fas fa-file-excel"></i>
              </div>
              <div class="share-name">Excel</div>
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">接收人</label>
          <div class="input-group">
            <input type="text" class="form-input" placeholder="输入接收人姓名或邮箱">
            <button class="btn-icon"><i class="fas fa-address-book"></i></button>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">报表内容</label>
          <div class="report-options">
            <label class="checkbox-item">
              <input type="checkbox" checked>
              <span class="checkbox-text">资产概览</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" checked>
              <span class="checkbox-text">分类统计</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" checked>
              <span class="checkbox-text">部门分布</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" checked>
              <span class="checkbox-text">生命周期</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" checked>
              <span class="checkbox-text">财务分析</span>
            </label>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-primary w-full">分享</button>
      </div>
    </div>
  </div>
  
  <script>
    // 报表标签切换
    const reportTabs = document.querySelectorAll('.report-tab');
    const reportContents = document.querySelectorAll('.report-content');
    
    reportTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        const tabId = this.dataset.tab;
        
        // 切换标签激活状态
        reportTabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // 切换内容显示
        reportContents.forEach(content => {
          content.classList.add('hidden');
          if (content.id === tabId) {
            content.classList.remove('hidden');
          }
        });
      });
    });
    
    // 分享按钮
    const shareBtn = document.getElementById('shareBtn');
    const shareModal = document.getElementById('shareModal');
    
    shareBtn.addEventListener('click', function() {
      shareModal.classList.add('active');
    });
    
    // 关闭模态框
    document.querySelectorAll('.modal-close').forEach(button => {
      button.addEventListener('click', function() {
        this.closest('.modal').classList.remove('active');
      });
    });
    
    // 初始化图表
    document.addEventListener('DOMContentLoaded', function() {
      // 资产价值统计图表
      const valueCtx = document.getElementById('valueChart').getContext('2d');
      new Chart(valueCtx, {
        type: 'bar',
        data: {
          labels: ['原值', '净值', '残值'],
          datasets: [{
            label: '资产价值(万元)',
            data: [893.5, 536.1, 89.4],
            backgroundColor: [
              'rgba(59, 130, 246, 0.7)',
              'rgba(16, 185, 129, 0.7)',
              'rgba(249, 115, 22, 0.7)'
            ],
            borderColor: [
              'rgba(59, 130, 246, 1)',
              'rgba(16, 185, 129, 1)',
              'rgba(249, 115, 22, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
      
      // 资产状态分布图表
      const statusCtx = document.getElementById('statusChart').getContext('2d');
      new Chart(statusCtx, {
        type: 'doughnut',
        data: {
          labels: ['在用', '闲置', '维修中', '已处置'],
          datasets: [{
            data: [1156, 32, 32, 57],
            backgroundColor: [
              'rgba(16, 185, 129, 0.7)',
              'rgba(59, 130, 246, 0.7)',
              'rgba(245, 158, 11, 0.7)',
              'rgba(239, 68, 68, 0.7)'
            ],
            borderColor: [
              'rgba(16, 185, 129, 1)',
              'rgba(59, 130, 246, 1)',
              'rgba(245, 158, 11, 1)',
              'rgba(239, 68, 68, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          }
        }
      });
      
      // 资产类型分布图表
      const categoryCtx = document.getElementById('categoryChart').getContext('2d');
      new Chart(categoryCtx, {
        type: 'pie',
        data: {
          labels: ['笔记本电脑', '台式电脑', '服务器', '打印机', '网络设备'],
          datasets: [{
            data: [356, 289, 42, 78, 125],
            backgroundColor: [
              'rgba(59, 130, 246, 0.7)',
              'rgba(16, 185, 129, 0.7)',
              'rgba(245, 158, 11, 0.7)',
              'rgba(239, 68, 68, 0.7)',
              'rgba(139, 92, 246, 0.7)'
            ],
            borderColor: [
              'rgba(59, 130, 246, 1)',
              'rgba(16, 185, 129, 1)',
              'rgba(245, 158, 11, 1)',
              'rgba(239, 68, 68, 1)',
              'rgba(139, 92, 246, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          }
        }
      });
      
      // 资产品牌分布图表
      const brandCtx = document.getElementById('brandChart').getContext('2d');
      new Chart(brandCtx, {
        type: 'bar',
        data: {
          labels: ['联想', '戴尔', '惠普', '华为', '苹果', '其他'],
          datasets: [{
            label: '数量',
            data: [356, 289, 245, 156, 124, 75],
            backgroundColor: 'rgba(59, 130, 246, 0.7)',
            borderColor: 'rgba(59, 130, 246, 1)',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
      
      // 部门资产数量图表
      const deptCountCtx = document.getElementById('deptCountChart').getContext('2d');
      new Chart(deptCountCtx, {
        type: 'bar',
        data: {
          labels: ['信息科技部', '财务部', '市场部', '人力资源部', '研发部'],
          datasets: [{
            label: '资产数量',
            data: [245, 156, 189, 124, 278],
            backgroundColor: 'rgba(59, 130, 246, 0.7)',
            borderColor: 'rgba(59, 130, 246, 1)',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
      
      // 部门资产价值图表
      const deptValueCtx = document.getElementById('deptValueChart').getContext('2d');
      new Chart(deptValueCtx, {
        type: 'bar',
        data: {
          labels: ['信息科技部', '财务部', '市场部', '人力资源部', '研发部'],
          datasets: [{
            label: '原值(万元)',
            data: [245, 124.8, 151.2, 99.2, 278],
            backgroundColor: 'rgba(59, 130, 246, 0.7)',
            borderColor: 'rgba(59, 130, 246, 1)',
            borderWidth: 1
          }, {
            label: '净值(万元)',
            data: [171.5, 74.88, 90.72, 59.52, 194.6],
            backgroundColor: 'rgba(16, 185, 129, 0.7)',
            borderColor: 'rgba(16, 185, 129, 1)',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
      
      // 资产年龄分布图表
      const ageCtx = document.getElementById('ageChart').getContext('2d');
      new Chart(ageCtx, {
        type: 'pie',
        data: {
          labels: ['1年以内', '1-2年', '2-3年', '3-4年', '4-5年', '5年以上'],
          datasets: [{
            data: [245, 356, 289, 156, 124, 75],
            backgroundColor: [
              'rgba(59, 130, 246, 0.7)',
              'rgba(16, 185, 129, 0.7)',
              'rgba(245, 158, 11, 0.7)',
              'rgba(239, 68, 68, 0.7)',
              'rgba(139, 92, 246, 0.7)',
              'rgba(107, 114, 128, 0.7)'
            ],
            borderColor: [
              'rgba(59, 130, 246, 1)',
              'rgba(16, 185, 129, 1)',
              'rgba(245, 158, 11, 1)',
              'rgba(239, 68, 68, 1)',
              'rgba(139, 92, 246, 1)',
              'rgba(107, 114, 128, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          }
        }
      });
      
      // 折旧趋势图表
      const depreciationCtx = document.getElementById('depreciationChart').getContext('2d');
      new Chart(depreciationCtx, {
        type: 'line',
        data: {
          labels: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07'],
          datasets: [{
            label: '资产净值(万元)',
            data: [625, 608, 590, 573, 556, 545, 536],
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            borderColor: 'rgba(59, 130, 246, 1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: false
            }
          }
        }
      });
      
      // 资产价值趋势图表
      const valueTrendCtx = document.getElementById('valueTrendChart').getContext('2d');
      new Chart(valueTrendCtx, {
        type: 'line',
        data: {
          labels: ['2022-07', '2022-10', '2023-01', '2023-04', '2023-07'],
          datasets: [{
            label: '资产原值(万元)',
            data: [756, 812, 845, 878, 893],
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            borderColor: 'rgba(59, 130, 246, 1)',
            borderWidth: 2,
            fill: false
          }, {
            label: '资产净值(万元)',
            data: [605, 625, 590, 556, 536],
            backgroundColor: 'rgba(16, 185, 129, 0.1)',
            borderColor: 'rgba(16, 185, 129, 1)',
            borderWidth: 2,
            fill: false
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: false
            }
          }
        }
      });
      
      // 资产投入分析图表
      const investmentCtx = document.getElementById('investmentChart').getContext('2d');
      new Chart(investmentCtx, {
        type: 'bar',
        data: {
          labels: ['2022-Q3', '2022-Q4', '2023-Q1', '2023-Q2'],
          datasets: [{
            label: '资产投入(万元)',
            data: [156, 124, 89, 78],
            backgroundColor: 'rgba(59, 130, 246, 0.7)',
            borderColor: 'rgba(59, 130, 246, 1)',
            borderWidth: 1
          }, {
            label: '维护成本(万元)',
            data: [23, 28, 19, 25],
            backgroundColor: 'rgba(245, 158, 11, 0.7)',
            borderColor: 'rgba(245, 158, 11, 1)',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    });
  </script>
  
  <style>
    /* 报表标签样式 */
    .report-tab {
      padding: 8px 16px;
      border-radius: 20px;
      background-color: #f3f4f6;
      color: #6b7280;
      font-size: 14px;
      white-space: nowrap;
      margin-right: 8px;
      border: none;
      outline: none;
    }
    
    .report-tab.active {
      background-color: #3b82f6;
      color: white;
    }
    
    /* 隐藏滚动条 */
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
    
    .hide-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    
    /* 统计卡片样式 */
    .stats-card-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 16px;
    }
    
    .stats-card {
      display: flex;
      align-items: center;
      padding: 12px;
      border-radius: 8px;
    }
    
    .stats-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      margin-right: 12px;
    }
    
    .stats-info {
      flex: 1;
    }
    
    .stats-value {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    
    .stats-label {
      font-size: 12px;
      color: #6b7280;
    }
    
    /* 报表区域样式 */
    .report-section {
      background-color: white;
      border-radius: 8px;
      margin: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #111827;
    }
    
    .section-actions {
      display: flex;
      align-items: center;
    }
    
    .btn-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      color: #6b7280;
      border: none;
      cursor: pointer;
    }
    
    .btn-icon:hover {
      background-color: #f3f4f6;
    }
    
    .btn-text {
      padding: 6px 12px;
      border-radius: 4px;
      background-color: transparent;
      color: #3b82f6;
      border: none;
      font-size: 14px;
      cursor: pointer;
    }
    
    .btn-text:hover {
      background-color: #eff6ff;
    }
    
    /* 图表容器样式 */
    .chart-container {
      height: 240px;
      padding: 16px;
    }
    
    /* 表格样式 */
    .report-table {
      width: 100%;
      border-collapse: collapse;
    }
    
    .report-table th,
    .report-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .report-table th {
      font-weight: 600;
      color: #374151;
      background-color: #f9fafb;
    }
    
    /* 最近变动样式 */
    .recent-changes {
      padding: 8px 16px;
    }
    
    .change-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .change-item:last-child {
      border-bottom: none;
    }
    
    .change-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin-right: 12px;
    }
    
    .change-info {
      flex: 1;
    }
    
    .change-title {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .change-meta {
      font-size: 12px;
      color: #6b7280;
    }
    
    /* 资产项样式 */
    .asset-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .asset-item:last-child {
      border-bottom: none;
    }
    
    .asset-info {
      flex: 1;
    }
    
    .asset-name {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .asset-meta {
      font-size: 12px;
      color: #6b7280;
    }
    
    .asset-action {
      margin-left: 12px;
    }
    
    .btn-outline-sm {
      padding: 4px 8px;
      border-radius: 4px;
      background-color: transparent;
      color: #3b82f6;
      border: 1px solid #3b82f6;
      font-size: 12px;
      cursor: pointer;
    }
    
    .btn-outline-sm:hover {
      background-color: #eff6ff;
    }
    
    /* 分享选项样式 */
    .share-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
    }
    
    .share-option:hover {
      background-color: #f3f4f6;
    }
    
    .share-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 8px;
    }
    
    .share-name {
      font-size: 12px;
      color: #374151;
    }
    
    /* 报表选项样式 */
    .report-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
  </style>
</body>
</html>